import { Directive, DirectiveBinding } from 'vue'
import { ElMessage } from 'element-plus'

interface HTMLElementWithCopyData extends HTMLElement {
  copyData: string | number
  handleClickEl: EventListener
}

const copy: Directive = {
  mounted(el: HTMLElementWithCopyData, binding: DirectiveBinding) {
    el.copyData = binding.value as string | number
    el.handleClickEl = async function () {
      try {
        await navigator.clipboard.writeText(el.copyData.toString())
        ElMessage.success('复制成功🌻')
      } catch (error) {
        console.error('复制操作不被支持或失败: ', error)
        ElMessage.error('复制失败🌻')
      }
    }
    el.addEventListener('click', el.handleClickEl)
  },
  updated(el: HTMLElementWithCopyData, binding: DirectiveBinding) {
    el.copyData = binding.value as string | number
  },
  beforeUnmount(el: HTMLElementWithCopyData) {
    el.removeEventListener('click', el.handleClickEl)
  },
}

export default copy
